{% extends "base.html" %}
{% load staticfiles %}

{% block title %}持仓账户映射管理{% endblock %}

{% block content %}
    <!--上传-->
    <div class="modal fade" data-backdrop="static" id="add_modal_am" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新增持仓账户映射</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div style="margin-top:3%; display: block">
                            <label>HFT持仓账号</label>
                            <input class="opts" id="combino" name="combino" type="text"
                                   placeholder="HFT持仓账号">
                            <div id="combino_spaninfo" class="input-validation" style="color: red"></div>
                        </div>
                        <div style="margin-top:3%; display: block">
                            <label>HFT持仓名称</label>
                            <input class="opts" id="combiname" name="combiname" type="text"
                                   placeholder="HFT持仓名称">
                            <div id="combiname_spaninfo" class="input-validation" style="color: red"></div>
                        </div>
                        <div style="margin-top:3%; display: block">
                            <label>衡泰持仓账号</label>
                            <input class="opts" id="accid" name="accid" type="text"
                                   placeholder="衡泰持仓账号">
                            <div id="accid_spaninfo" class="input-validation" style="color: red"></div>
                        </div>
                        <div style="margin-top:3%; display: block">
                            <label>衡泰持仓名称</label>
                            <input class="opts" id="accname" name="accname" type="text"
                                   placeholder="衡泰持仓名称">
                            <div id="accname_spaninfo" class="input-validation" style="color: red"></div>
                        </div>
                        <div style="height: 20px; display: block">
                            <div style="padding-left:120px; float: left;">
                                <span class="btn-cancel btn-stc" onclick="add_modal_hide()">取消</span>
                            </div>
                            <div style="padding-left:5px;float: left;">
                                <span class="btn-confirm btn-stc" id="add_mod_id" amID="" onclick="addORmodify_DB()">确认</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 交易通道删除确认模态框 -->
    <div class="modal fade" data-backdrop="static" id="modal_delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">删除交易通道确认</h4>
                </div>
                <div class="modal-body">
                    <div style="margin-top:3%; display: block" id="confirm_paper">
                    </div>
                    <div style="height: 30px; display: block;margin-top: 20px">
                        <div style="padding-left:120px; float: left;">
                            <span class="btn-cancel btn-stc" onclick="del_modal_hide()">取消</span>
                        </div>
                        <div style="padding-left:5px; float: left;">
                            <span id="del" sid="" class="btn-confirm btn-stc" onclick="del_DB()">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--提示成功/失败模态框-->
    <div class="modal fade" data-backdrop="static" id="res_info">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="resinfo_title">删除</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <p id="resinfo_content" class="operat-success">删除成功！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main content -->
    <body>
    <section>
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active" style="margin-top:10px"><a href="#fa-upload" onclick="tabs(0)"
                                                              data-toggle="tab">持仓账户映射管理</a></li>
            </ul>
            <div class="tab-content">
                <!--查询-->
                <div class="tab-pane active" id="fa-check">
                    <div class="div-query">
                        <div class="lbl-query">
                            <button class="btn-add" onclick="add_modal_show()">新增</button>
                        </div>
                        <div class="lbl-query"><span>HFT持仓账号</span>
                            <input class="input-query" type="text" id="combinoselect">
                            <span id="combinoSpaninfo" style="color: red;font-size: 14px"></span>
                        </div>
                        <div class="lbl-query"><span>HFT持仓名称</span>
                            <input class="input-query" type="text" id="combinameselect">
                        </div>
                        <div class="lbl-query"><span>衡泰持仓账号</span>
                            <input class="input-query" type="text" id="accidselect">
                        </div>
                        <div class="lbl-query"><span>衡泰持仓名称</span>
                            <input class="input-query" type="text" id="accnameselect">
                        </div>
                        <div class="lbl-query">
                            <button class="btn-query" onclick="amselect()">查询
                            </button>
                        </div>
                    </div>
                    <table class="stc-" id="AccountMappingTable">
                    </table>
                </div>
            </div>
        </div>
    </section>
    </body>
{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        //get请求+搜索
        $(function () {
            amselect()
        })

        //tab标签页
        function tabs(n) {
            if (n == 0) {
                amselect();
                $('#fa-upload').addClass('active');
                $('#fa-pack').removeClass('active');
                $('#fa-sim').removeClass('active');
            }
        }


        //持仓账户映射管理的查询+搜索
        function amselect() {
            //有查询条件,查询
            //无查询条件,get请求页面初始数据
            var combino = $("#combinoselect").val();

            var combiname = $("#combinameselect").val();
            var accid = $("#accidselect").val();
            var accname = $("#accnameselect").val();

            // 整理发送后台的数据
            var data = {
                "combino": combino,
                "combiname": combiname,
                "accid": accid,
                "accname": accname,
            };

            var JsonData = JSON.stringify(data);
            $.post("{% url 'Manager:accountmapping' %}", {'data': JsonData, 'accountmapping_search': 1}, function (r) {
                $("#AccountMappingTable").bootstrapTable("destroy").bootstrapTable({
                    height: 600,
                    columns: [
                        {
                            field: 'combino',
                            title: 'HFT持仓账号',
                        }, {
                            field: 'combiname',
                            title: 'HFT持仓名称',
                        }, {
                            field: 'accid',
                            title: '衡泰持仓账号',
                        }, {
                            field: 'accname',
                            title: '衡泰持仓名称',
                        }, {
                            field: 'amoption',
                            title: '操作',

                            formatter: function (value, row, index) {
                                return "<span onclick=\"modify_field_show('" + value + "')\" type='button' class='btn btn-success btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 修改</span> " + "&nbsp;<span onclick=\"del_modal_show('" + value + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 删除</span> ";


                            }
                        },
                    ],
                    data: r,
                    // height: 600,
                    //******前端分页设置****
                    pagination: true,
                    pageNumber: 1,
                    pageSize: 20,
                    pageList: [10, 20, 50, 100],
                    paginationHAlign: "right",
                    paginationDetailHAlign: "none"
                    //******前端分页设置****
                });
            });

        }

        //删除，lable标签的onclick时间显示删除模态框，此框中有确认和取消按钮，取消：隐藏模态框；确认：发送post请求到后台删除数据；
        //1.显示模态框
        function del_modal_show(id) {
            $('.modal-title').text('删除持仓账户映射');
            $('#modal_delete').modal('show');
            $('#confirm_paper').text('确认删除持仓账户映射管理中的"' + id + '"吗？');
            $('#del').attr('sid', id);
        }

        //2.取消
        function del_modal_hide() {
            $('#modal_delete').modal('hide')
        }

        //3.确认删除
        function del_DB() {
            d = $('#del').attr('sid');
            $.post("{% url 'Manager:accountmapping' %}", {'id': d, 'del_DB': 1}, function (r) {
                if (r) {
                    $("#AccountMappingTable").bootstrapTable("destroy").bootstrapTable({
                        height: 600,
                        columns: [
                            {
                                field: 'combino',
                                title: 'HFT持仓账号',
                            }, {
                                field: 'combiname',
                                title: 'HFT持仓名称',
                            }, {
                                field: 'accid',
                                title: '衡泰持仓账号',
                            }, {
                                field: 'accname',
                                title: '衡泰持仓名称',
                            }, {
                                field: 'amoption',
                                title: '操作',

                                formatter: function (value, row, index) {
                                    var ca = row.combino + "_" + row.accid;
                                    return "<span onclick=\"modify_field_show('" + value + "')\" type='button' class='btn btn-success btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 修改</span> " + "&nbsp;<span onclick=\"del_modal_show('" + ca + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 删除</span> ";


                                }
                            },
                        ],
                        data: r,
                        // height: 600,
                        {#width: 100,#}
                        //******前端分页设置****
                        pagination: true,
                        pageNumber: 1,
                        pageSize: 20,
                        pageList: [10, 20, 50, 100],
                        paginationHAlign: "right",
                        paginationDetailHAlign: "left"
                        //******前端分页设置****
                    })
                    $("#modal_delete").modal("hide")
                    $("#delete_success").modal("show");
                    setTimeout(function () {
                        $("#delete_success").modal("hide");
                    }, 2000)
                } else {
                    $("#msg_delete").text("服务器错误！")
                    $("#delete_success").modal("show");
                    setTimeout(function () {
                        $("#delete_success").modal("hide");
                    }, 2000)
                }
            });
        };


        //新增，lable标签的onclick事件显示新增模态框，此框中有确认和取消按钮，取消：隐藏模态框；确认：发送post请求到后台新增数据；
        //1.显示模态框
        function add_modal_show() {
            $('#add_modal_am').modal('show');
            //点击确定的值清空
            $("input").val("");
            $('#combino_spaninfo').text('');
            $('#combiname_spaninfo').text('');
            $('#accid_spaninfo').text('');
            $('#accname_spaninfo').text('');
            //后台判断是添加还是修改
            $('#add_mod_id').attr('amID', 'add')
            //移出禁用的主键
            $("#combino").removeAttr('disabled','disabled');
            $("#accid").removeAttr('disabled','disabled');
            //改变被修改改变的修改xxx
            $('.modal-title').text('新增持仓账户映射');
        }

        //2.取消
        function add_modal_hide() {
            $('#add_modal_am').modal('hide');
            //点击取消的值清空
            $("input").val("");
            $('#combino_spaninfo').text('');
            $('#combiname_spaninfo').text('');
            $('#accid_spaninfo').text('');
            $('#accname_spaninfo').text('');
        }

        //3.确认添加/修改
        function addORmodify_DB() {
            //置空提示信息
            $('#accid_spaninfo').text('');
            $('#combino_spaninfo').text('');
            var combino = $('#combino').val();
            var accid = $('#accid').val();
            var combiname = $('#combiname').val();
            var accname = $('#accname').val();
            var id = $('#add_mod_id').attr('amID')
            data = {
                'combino': combino,
                'accid': accid,
                'combiname': combiname,
                'accname': accname,
                'aORmFlag': id,
            }
            var JsonData = JSON.stringify(data)

            if (accid.length === 0) {
                $('#accid_spaninfo').text('衡泰持仓账号不能为空');
                return;

            } else if (combino.length === 0) {
                $('#combino_spaninfo').text('HFT持仓账号不能为空');
                return;
            }

            $.post("{% url 'Manager:accountmapping' %}", {'data': JsonData, 'addORmodify_DB': 1}, function (r) {
                if (r === 'am') {
                    $('#combino_spaninfo').text('数据已存在，无须添加。');
                    return;

                } else if (r) {
                    $("#AccountMappingTable").bootstrapTable("destroy").bootstrapTable({
                        height: 600,
                        columns: [
                            {
                                field: 'combino',
                                title: 'HFT持仓账号',
                            }, {
                                field: 'combiname',
                                title: 'HFT持仓名称',
                            }, {
                                field: 'accid',
                                title: '衡泰持仓账号',
                            }, {
                                field: 'accname',
                                title: '衡泰持仓名称',
                            }, {
                                field: 'amoption',
                                title: '操作',

                                formatter: function (value, row, index) {
                                    return "<span onclick=\"modify_field_show('" + value + "')\" type='button' class='btn btn-success btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 修改</span> " + "&nbsp;<span onclick=\"del_modal_show('" + value + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 删除</span> ";


                                }
                            },
                        ],
                        data: r,
                        // height: 600,
                        //******前端分页设置****
                        pagination: true,
                        pageNumber: 1,
                        pageSize: 20,
                        pageList: [10, 20, 50, 100],
                        paginationHAlign: "right",
                        paginationDetailHAlign: "none"
                        //******前端分页设置****
                    });
                    $("#add_modal_am").modal("hide");
                    $("#res_info").modal("show");
                    $('#resinfo_title').text('新增/修改持仓账户映射');
                    $('#resinfo_content').text('新增/修改持仓账户映射成功！');
                    setTimeout(function () {
                        $("#res_info").modal("hide");
                    }, 2000)
                } else {
                    $("#resinfo_title").text("操作失败");
                    $("#resinfo_content").text("服务器错误！");
                    $("#res_info").modal("show");
                    setTimeout(function () {
                        $("#res_info").modal("hide");
                    }, 2000)
                }
            });


        }

        //4.修改时显示字段值，修改与新增唯一的不同是修改时显示字段值
        function modify_field_show(id) {

            $('#add_mod_id').attr('amID', id);
            $('#add_modal_am').modal('show');
            $('.modal-title').text('修改持仓账户映射');
            $("select").val("");
            //禁用主键
            $("#combino").attr('disabled','disabled');
            $("#accid").attr('disabled','disabled');
            $.get("{% url 'Manager:accountmapping' %}", {'modify_am': id}, function (r) {
                if (r) {
                    var data = (r.rows)[0];
                    for (var key in data) {
                        if ($('#' + key)) {
                            $('#' + key).val(data[key]);
                        }

                    }
                }
            });
        };


    </script>
    <style>
        {#加载数据时的样式#}
        .bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
            align-items: center;
            background: #141414;
            display: none;
            justify-content: center;
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 1000;
        }
    </style>

{% endblock %}